<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--专病数据-->
      <el-form
        class="formBox formBox1"
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <el-form-item label="诊断" prop="diseaseId">
          <el-select
            v-model="queryParams.diseaseId"
            placeholder="专病名称"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="dict in sysManageDiseases"
              :key="dict.diseaseClassifyId"
              :label="dict.diseaseClassifyName"
              :value="dict.diseaseClassifyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="采集设备" prop="photoType">
          <el-select
            v-model="queryParams.photoType"
            placeholder="采集设备"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="dict in dict.type.photo_upload_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="光照类型" prop="facelight">
          <el-select
            v-model="queryParams.facelight"
            placeholder="采集设备"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="dict in dict.type.photo_lighting_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部位" prop="facePart">
          <el-select
            v-model="queryParams.facePart"
            placeholder="部位"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="dict in dict.type.sys_face_part"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status" clearable>
          <el-select
            v-model="queryParams.status"
            placeholder="状态"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="dict in sysUseTypeArr"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传人">
          <el-select
            v-model="queryParams.visitUserName"
            placeholder="请选择上传人"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标注人">
          <el-select
            v-model="queryParams.visitUserName"
            placeholder="请选择标注人"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人">
          <el-select
            v-model="queryParams.visitUserName"
            placeholder="请选择审核人"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <!-- <el-button icon="el-icon-printer" size="mini" @click="resetQuery">打印</el-button> -->
        </el-form-item>
      </el-form>
      <div class="formBox">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              >上传照片</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getAnnotateList"
          ></right-toolbar>
        </el-row>
        <el-table border v-loading="loading" :data="annotateList">
          <!--                <el-table-column type="selection" width="50" align="center" />-->
          <el-table-column
            sortable
            label="序号"
            align="center"
            type="index"
            width="50"
          >
            <template slot-scope="scope">
              <span>{{ getIndex(scope.$index) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            label="照片"
            align="center"
            prop="photoNum"
            width="100"
          >
            <template slot-scope="scope">
              <el-tooltip placement="right" effect="light">
                <div slot="content" class="tooltipSlotBox">
                  <div
                    class="img-txt"
                    v-for="(item, Mindex) in scope.row.rtList"
                    :key="Mindex"
                  >
                    <div class="user-info-head">
                      <el-image
                        class="img-style"
                        fit="contain"
                        :src="item.thumbnail"
                        @click="watchBigPic(scope.row, Mindex)"
                      ></el-image>
                    </div>
                  </div>
                </div>
                <div>
                  <el-tag type="1">{{ scope.row.photoNum }}</el-tag>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            label="诊断"
            align="center"
            prop="diagnosis"
            :show-overflow-tooltip="true"
            style="width: 300px"
          />
          <el-table-column
            sortable
            label="标注状态"
            align="center"
            prop="annotateStateValue"
            :show-overflow-tooltip="true"
            width="100"
          >
            <!-- <template slot-scope="scope">
              <dict-tag
                :options="sysUseTypeArr"
                :value="scope.row.annotateState"
              />
            </template> -->
          </el-table-column>

          <el-table-column
            sortable
            label="拍照设备"
            align="center"
            prop="type"
            width="100"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.photo_upload_type"
                :value="scope.row.type"
              />
            </template>
          </el-table-column>
          <el-table-column
            sortable
            label="采集时刻"
            align="center"
            prop="status"
            width="120"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_diagnosis_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column
            sortable
            label="上传人"
            align="center"
            prop="uploadBy"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            sortable
            label="上传时间"
            align="center"
            prop="uploadTime"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            sortable
            label="标注人"
            align="center"
            prop="taggedBy"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            sortable
            label="标注时间"
            align="center"
            prop="taggedTime"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            sortable
            label="审核人"
            align="center"
            prop="reviewedBy"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            sortable
            label="审核时间"
            align="center"
            prop="reviewedTime"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.reviewedTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="260"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="watchBigPic(scope.row, 0)"
                >标注</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getAnnotateList"
        />
      </div>
    </el-row>

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1180px"
      append-to-body
      :before-close="cancel"
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <photoUpload :isMorePic="false" :patientItem="patientItem"></photoUpload>
    </el-dialog>

    <el-dialog
      title="照片标注"
      :visible.sync="picMarkDialogVisible"
      width="100%"
      center
      :close-on-click-modal="false"
      :append-to-body="true"
      class="nopaddingBody fullDialog"
      v-dialogDrag
    >
      <PhotoMark
        :currentUrl="currentUrl"
        :imgList="imgList"
        :myImgIndex="myImgIndex"
        @closedEvent="picMarkDialogVisible=false"
        v-if="picMarkDialogVisible"
      >
      </PhotoMark>
    </el-dialog>
  </div>
</template>

<script>
import { listUser } from "@/api/system/user";
import { listAnnotate, delAnnotate } from "@/api/system/annotate";
import { listClassify } from "@/api/system/classify";
import { getToken } from "@/utils/auth";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import photoUpload from "@/views/components/uploadImage/photoUpload.vue";
import PhotoMark from "@/views/components/photoMark/photoMark.vue";
export default {
  name: "annotateManage",
  dicts: [
    "sys_manage_diseases",
    "photo_upload_type",
    "photo_lighting_type",
    "sys_face_part",
    "sys_diagnosis_status",
  ],
  components: { photoUpload, PhotoMark },
  data() {
    return {
      printDialogVisible: false,
      sysUseTypeArr: [
        { label: "未标注", value: 0 },
        { label: "已标注", value: 1 },
        { label: "已审核", value: 2 },
      ],
      editor: null,
      // 遮罩层
      loading: true,
      printInfo: {},
      // 选中数组
      ids: [],
      diseaseClassifyName: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 标注表格数据
      annotateList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 是否修改
      inputDisabled: false,
      // 表单参数
      // form: {},
      form: {
        title: "", //文本标题
        colorValue: "", //颜色值
        diseaseIds: "", //专病类型 （字典管理）
        label: "",
      },
      detectionType: [], //可选的 检测指标  （接口返回）仅前端用
      sysManageDiseases: [], //专病管理
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tagSettingName: undefined, //标注设置名称
        diseaseId: undefined, //专病类别
        publisher: undefined, //创建人
      },
      // 表单校验
      rules: {
        title: [
          {
            required: true,
            message: "标注设置名称不能为空",
            trigger: "blur",
          },
        ],
        diseaseIds: [
          {
            required: true,
            message: "专病必选",
            trigger: "blur",
          },
        ],
        label: [
          {
            required: true,
            message: "特征名称不能为空！",
            trigger: "blur",
          },
        ],
        colorValue: [
          {
            required: true,
            message: "颜色值不能为空！",
            trigger: "blur",
          },
        ],
      },
      userList: [],
      classifyList: [],
      patientItem: {},
      picMarkDialogVisible: false,
      currentUrl: "",
      imgList: [],
      myImgIndex: "", //picData 第几组的index下 第几个照片的index
    };
  },
  watch: {},
  created() {
    this.getclassList();
    this.getuserList();
  },
  mounted() {
    this.getAnnotateList();
  },
  computed: {},
  methods: {
    watchBigPic(row, Mindex) {
      console.log("---------+++++++", row, Mindex);
      this.myImgIndex = Mindex;
      this.currentUrl = row.rtList[Mindex].photoAddress;
      row.rtList.forEach((item) => {
        item.patientName = row.patientName;
        item.age = row.age;
        item.doctorDiagnosis = row.diagnosis.replace(/ *\([^)]*\) */g, "");
      });
      this.imgList = row.rtList;
      this.picMarkDialogVisible = true;
    },
    /** 查询咨询医生 */
    getuserList() {
      listUser({ pageNum: 1, pageSize: 9999, roleId: "" }).then((res) => {
        this.userList = res.rows;
      });
    },
    changeColorValue(e) {
      console.log(e);
    },

    // 获取专病列表
    getclassList() {
      this.loading = true;
      let params = {
        pageNum: 1,
        pageSize: 9999,
        status: "0",
      };
      listClassify(params).then((response) => {
        this.loading = false;
        this.sysManageDiseases = response.rows;
      });
    },

    // 真实序号计算（计算分页影响）
    getIndex(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
      );
    },
    /** 查询标注列表 */
    getAnnotateList() {
      listAnnotate(this.queryParams).then((res) => {
        console.log(res);
        this.annotateList = res.rows.map((item) => {
          return {
            ...item,
            annotateStateValue: this.sysUseTypeArr.find(
              (it) => it.value == item.annotateState
            )?.label,
          };
        });
        this.total = res.total;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      (this.form = {
        title: "", //文本标题
        type: "", //文本类别 （字典管理）
        diseaseIds: "", //专病类型 （字典管理）
        status: "0", //使用状态 //0在用
        content: "", //文本内容
        publisher: "", //创建人
      }),
        this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getAnnotateList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.inputDisabled = false;
      this.open = true;
      this.title = "上传照片";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.inputDisabled = true;
      const textId = row.textId;
      getText(textId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "编辑照片";
      });
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          if (this.form.textId != undefined) {
            updateText(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getAnnotateList();
              }
            });
          } else {
            addText(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getAnnotateList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const pId = row.pindex;
      this.$modal
        .confirm('是否确认删除照片编号为"' + pId + '"的数据项？')
        .then(function () {
          return delAnnotate(pId);
        })
        .then(() => {
          this.getAnnotateList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.el-tag {
  margin-right: 15px;
}
.tooltipSlotBox {
  max-width: 460px;
  display: flex;
  flex-wrap: wrap;
  .img-txt {
    //display: flex;
    //flex-direction: column;
    //text-align: center;
    //margin: 14px;
    margin: 6px;

    .user-info-head {
      width: 72px;
      height: 104px;

      //border: 1px solid #000;
      .img-style {
        width: 100%;
        height: 100%;

        ::v-deep .el-image__error {
          opacity: 0;
        }
      }
    }
  }
}
</style>
